<template>
  <div>
    <!--头部-->
    <Head :head="head" @greet="greet"></Head>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="1000px"
      center>
      <div class="left_essential base">
        <img src="/static/assets/img/dtx1.png" alt="">
        <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
      </div>
      <div class="right_essential" v-if="temp1 == 1">
        <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
        <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
        <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
        <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
        <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
        <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
      </div>
      <div class="right_essential" v-if="temp1 == 2">
        <p>您的安全服务</p>
        <div><p><span class="width_user">用户名</span>{{user}}</p></div>
        <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
        <div><p><span>绑定手机</span>{{user}}</p></div>
        <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
      </div>
      <div class="both"></div>
    </el-dialog>
    <!--内容-->
    <el-container>
      <el-container class="right_bgcolor">
        <div class="bgcolor" style="width: 100%;">
          <left-top :active="5"></left-top>
          <el-main>
            <div class="main_left">
              <div style="height: 25px;margin: 0 auto;width: 300px;">
                <el-col v-for="(c,index) in details" style="width: 100px;" :key="(c,index).index">
                  <div class="ct">
                    <span class="detail"  v-on:click="ranking($event, index, c.t)" v-bind:class="{'visible3':nowIndex1 == index}">
                      {{ c.name }}
                    </span>
                  </div>
                </el-col>
              </div>
              <div style="clear: both;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline fl">
                  <el-form-item>
                    <el-input v-model="formInline.name" placeholder="请输入医院"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="" style="height: 40px;margin-right: 1%;">
                <!--<img v-for="img in images" :src="tempa?img.src:img.src1" alt="" v-on:click="qh(img.t)" class="fr" :key="img.index">-->
                <el-form ref="form" :model="form" class="fr version">
                  <el-select v-model="form.region" placeholder="标准版" class="aaaa">
                    <el-option label="标准版" value="1"></el-option>
                    <hr>
                    <el-option label="基层版-PCI" value="2"></el-option>
                    <hr>
                    <el-option label="基层版-溶柱" value="3"></el-option>
                    <hr>
                    <el-option label="基层版-转运" value="4"></el-option>
                  </el-select>
                  <div class="position-relative width-23 top_qi">
                    <div @click="showAverage = !showAverage" class="clearfix full-width">
                      <div class="fr text-white">
                        <i class="el-icon-arrow-down el-icon--right rotate" :class="{'rotate-180':showAverage}"></i>
                      </div>
                      <div class="fr" :class="{'text-white': choosedAverage.type}">{{choosedText}}</div>
                    </div>
                    <div class="sub-tip" :class="{'sub-tip-show':showAverage}"></div>
                    <transition name="el-zoom-in-top">
                      <div class="bg-white of-hidden sub-card" v-show="showAverage">
                        <div class="border-bottom" v-for="(item,i) in averages" :key="i">
                          <div class="px-10 text-14 text-black-light py-7">
                            <div class="d-flex"
                                 :class="{'pt-7': j !== 0}"
                                 v-for="(subItem,j) in item.content" :key="j">
                              <div class="width-8" :class="{'line-height-40':subItem.type === 'year' || subItem.type === 'freeAverage'}">
                                {{subItem.title}}
                              </div>
                              <div class="flex-full flex-wrap d-flex"
                                   :class="{'border-bottom pb-7': j !== item.content.length - 1}">
                                <div v-for="(sub,k) in subItem.subs" :key="k"
                                     class="mr-5 cursor-pointer position-relative" :class="{'choosedColor': check(sub,subItem,item)}">
                                  <div v-if="subItem.type === 'year'">
                                    {{sub.name}}
                                    <el-date-picker
                                      class="height-2"
                                      v-model="sub.value"
                                      type="year"
                                      :clearable="false"
                                      value-format="yyyy"
                                      @change="choose(sub,subItem,item)"
                                      prefix-icon="el-icon-arrow-down">
                                    </el-date-picker>
                                  </div>
                                  <div v-else-if="subItem.type === 'freeAverage'">
                                    <span class="mr-5">{{sub.label}}</span>
                                    <span :class="{'choosedColor': choosedAverage.type === 3}">{{sub.name}}</span>
                                    <el-date-picker
                                      class="width-4 height-2"
                                      v-model="sub.value"
                                      type="month"
                                      :clearable="false"
                                      value-format="yyyy年MM月"
                                      @change="choose(sub,subItem,item)"
                                      prefix-icon="el-icon-arrow-down">
                                    </el-date-picker>
                                  </div>
                                  <div v-else @click.stop="choose(sub,subItem,item)">
                                    {{sub.name}}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </transition>
                  </div>
                </el-form>
                <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
              </div>
              <div class="both"></div>
              <div class="main_right" v-if="tempe == 1">
                <el-row :gutter="20" style="margin: auto;width: 70%;">
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('0')">
                      <img src="/static/assets/img/in1.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('1')">
                      <img src="/static/assets/img/in2.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('2')">
                      <img src="/static/assets/img/in3.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('3')">
                      <img src="/static/assets/img/in4.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" style="margin: auto;width: 70%;">
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('4')">
                      <img src="/static/assets/img/in5.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('5')">
                      <img src="/static/assets/img/in6.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('6')">
                      <img src="/static/assets/img/in7.png" alt="">
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple" @click="handleClick1('7')">
                      <img src="/static/assets/img/in8.png" alt="">
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="main_right" v-if="tempe == 2">
                <template>
                  <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="city"
                      fixed
                      sortable
                      label="市">
                    </el-table-column>
                    <el-table-column
                      prop="hospital"
                      sortable
                      label="医院">
                    </el-table-column>
                    <el-table-column
                      prop="batch"
                      sortable
                      label="填报编号">
                    </el-table-column>
                    <el-table-column
                      prop="authentica"
                      sortable
                      label="患者姓名">
                    </el-table-column>
                    <el-table-column
                      prop="progess"
                      sortable
                      label="性别">
                    </el-table-column>
                    <el-table-column
                      prop="certification"
                      sortable
                      label="年龄">
                    </el-table-column>
                    <el-table-column
                      prop="number"
                      sortable
                      width="150"
                      label="填报日期">
                    </el-table-column>
                    <el-table-column
                      prop="number1"
                      sortable
                      width="150"
                      label="是否归档">
                    </el-table-column>
                    <el-table-column
                      prop="number2"
                      sortable
                      width="150"
                      label="心电图">
                    </el-table-column>
                    <el-table-column
                      prop="number3"
                      sortable
                      width="150"
                      label="标签">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      color="#8D3FDA"
                      width="150">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">打开</el-button>
                        <el-button type="text" size="small">添加标签</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </div>
            </div>
          </el-main>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import api from '../api.js'
import model from '@/components/model'
import Table from '@/components/Table'
import Head from '@/components/Head'
import LeftTop from '@/components/Left'
import _ from 'lodash'
export default {
  data () {
    return {
      checked: true,
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '填报信息',
        name: '李冰冰 ',
        methods: 'greet'
      },
      isShow: false,
      isow: false,
      temp: true,
      tempa: true,
      showAverage: false,
      user: '543759843@qq.com',
      centerDialogVisible: false,
      nowIndex: 0,
      temp1: 1,
      tempe: 1,
      nowIndex1: 0,
      details: [
        {name: '填报量', t: 1},
        {name: '病历', t: 2}
      ],
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      images: [
        {src: '/static/assets/img/plus.png', src1: '/static/assets/img/plus1.png', t: true},
        {src: '/static/assets/img/reduce.png', src1: '/static/assets/img/reduce1.png', t: false}
      ],
      form: {
        region: '',
        date: '',
        value5: ''
      },
      formInline: {
        name: ''
      },
      form1: {
        quer: ''
      },
      tableData: [{
        city: '苏州',
        hospital: '苏州第一附属医院',
        batch: '2529100',
        authentica: '刘冰冰',
        progess: '女',
        certification: '65',
        number: '2018-02-5 10:25',
        number1: '是',
        number2: '1'
      }, {
        city: '无锡',
        hospital: '无锡人民医院',
        batch: '2529101',
        authentica: '张灿',
        progess: '男',
        certification: '48',
        number: '2018-04-5 15:25',
        number1: '是',
        number2: '1'
      }, {
        city: '南京',
        hospital: '南京市附属医院',
        batch: '2529102',
        authentica: '李四',
        progess: '男',
        certification: '73',
        number: '2018-05-13 08:25',
        number1: '是',
        number2: '1'
      }, {
        city: '苏州',
        hospital: '苏州立医院',
        batch: '2529103',
        authentica: '王东',
        progess: '男',
        certification: '45',
        number: '2018-02-5 10:25',
        number1: '是',
        number2: '1'
      }, {
        city: '昆山',
        hospital: '昆山第四人民医院',
        batch: '2529104',
        authentica: '李明',
        progess: '女',
        certification: '63',
        number: '2017-3-12 12:36',
        number1: '是',
        number2: '1'
      }, {
        city: '昆山',
        hospital: '昆山市中医医院',
        batch: '2529105',
        authentica: '智多星',
        progess: '女',
        certification: '56',
        number: '2016-03-9 13:56',
        number1: '是',
        number2: '1',
      }, {
        city: '常熟',
        hospital: '常熟市支塘人民医院',
        batch: '2529106',
        authentica: '高文',
        progess: '女',
        certification: '48',
       number: '2017-06-15 18:00',
        number1: '是',
        number2: '1'
      }, {
        city: '苏州',
        hospital: '张家港市第六人民医院',
        batch: '2529107',
        authentica: '高妹',
        progess: '女',
        certification: '56',
        number: '2017-12-21 21:33',
        number1: '是',
        number2: '1',
      }, {
        city: '南京',
        hospital: '南京市中心医院',
        batch: '2529108',
        authentica: '张娟',
        progess: '女',
        certification: '49',
        number: '2018-10-09 22:30',
        number1: '是',
        number2: '3'
      },{
        city: '徐州',
        hospital: '徐州市第一人民医院',
        batch: '2029109',
        authentica: '王娜',
        progess: '女',
        certification: '45',
        number: '2017-09-03 22:15',
        number1: '是',
        number2: '1'
      }],
      averages: [
        {
          type: 1,
          content: [
            {
              title: '年份',
              type: 'year',
              subs: [
                {
                  name: '请选择',
                  value: ''
                }
              ]
            },
            {
              title: '年平均',
              type: 'range',
              subs: [
                {
                  name: '整年',
                  value: 'all'
                }
              ]
            },
            {
              title: '半年平均',
              type: 'range',
              subs: [
                {
                  name: '上半年',
                  value: 'firstHalf'
                },
                {
                  name: '下半年',
                  value: 'secondHalf'
                }
              ]
            },
            {
              title: '季度平均',
              type: 'range',
              subs: [
                {
                  name: '一季度',
                  value: 'quarterOne'
                },
                {
                  name: '二季度',
                  value: 'quarterTwo'
                },
                {
                  name: '三季度',
                  value: 'quarterThree'
                },
                {
                  name: '四季度',
                  value: 'quarterFour'
                }
              ]
            },
            {
              title: '月平均',
              type: 'range',
              subs: [
                {
                  name: '1月',
                  value: 'jan'
                },
                {
                  name: '2月',
                  value: 'feb'
                },
                {
                  name: '3月',
                  value: 'mar'
                },
                {
                  name: '4月',
                  value: 'apr'
                },
                {
                  name: '5月',
                  value: 'may'
                },
                {
                  name: '6月',
                  value: 'jun'
                },
                {
                  name: '7月',
                  value: 'jul'
                },
                {
                  name: '8月',
                  value: 'aug'
                },
                {
                  name: '9月',
                  value: 'sep'
                },
                {
                  name: '10月',
                  value: 'oct'
                },
                {
                  name: '11月',
                  value: 'nov'
                },
                {
                  name: '12月',
                  value: 'Dec'
                }
              ]
            }
          ],
          choodValue: []
        },
        {
          type: 2,
          content: [
            {
              title: '累计平均',
              type: 'sum',
              subs: [
                {
                  name: '累计至今',
                  value: 'now'
                }
              ]
            }
          ],
          choosedValue: []
        },
        {
          type: 3,
          content: [
            {
              title: '自由平均',
              type: 'freeAverage',
              subs: [
                {
                  label: '起始',
                  name: '请选择',
                  value: ''
                },
                {
                  label: '至',
                  name: '请选择',
                  value: ''
                }
              ]
            }
          ],
          choosedValue: []
        }
      ],
      choosedAverage: {}
    }
  },
  components: {
    model,
    Table,
    Head,
    LeftTop
  },
  mounted () {
    api.getAvg('S2FMC', '本省平均值', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
    api.getRank('S2FMC', '2018-01', '2018-01')
      .then(res => {
        console.log(res)
      })
  },
  methods: {
    toggles: function () {
      this.isShow = true
    },
    togs: function () {
      this.isow = true
    },
    greet: function () {
      this.centerDialogVisible = true
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    qh: function (t) {
      this.tempa = t
      this.temp = t
    },
    ranking: function (event, index, t) {
      console.log(index)
      this.nowIndex1 = index
      this.tempe = t
    },
    sorts (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    choose (sub, fparent, sparent) {
      if (fparent.type === 'year' || fparent.type === 'freeAverage') {
        sub.name = sub.value
      }
      this.choosedAverage = sparent
      let index = _.findIndex(sparent.choosedValue, {type: fparent.type})
      if (index === -1) {
        let obj = {
          type: fparent.type,
          value: sub.value,
          name: sub.name
        }
        sparent.choosedValue.push(obj)
      } else {
        sparent.choosedValue[index].value = sub.value
        sparent.choosedValue[index].name = sub.name
      }
      // 清空未选择项
      this.averages.forEach(item => {
        if (item.type !== this.choosedAverage.type) {
          item.choosedValue = []
          item.content.forEach(subItem => {
            if (subItem.type === 'year' || subItem.type === 'freeAverage') {
              subItem.subs.forEach(sub => {
                sub.value = ''
              })
            }
          })
        }
      })
    },
    check (sub, fparent, sparent) {
      if (fparent.type !== 'freeAverage') {
        if (_.findIndex(sparent.choosedValue, {type: fparent.type}) > -1) {
          return sparent.choosedValue[_.findIndex(sparent.choosedValue, {type: fparent.type})].value === sub.value
        }
        return false
      }
    },
    handleClick: function (data) {
      console.log(data)
      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/cases')
    },
    handleClick1: function (type) {
      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/ranking?type=' + type)
    }
  },
  computed: {
    'choosedText' () {
      let result = ''
      if (!this.choosedAverage.type) {
        result = '请选择'
      } else {
        if (this.choosedAverage.choosedValue[0].type !== 'year') {
          _.reverse(this.choosedAverage.choosedValue)
        }
        if (this.choosedAverage.type === 3) {
          this.choosedAverage.content[0].subs.forEach(item => {
            result += item.label + ' ' + item.value + ' '
          })
        } else {
          this.choosedAverage.choosedValue.forEach(item => {
            result += item.name + '  '
          })
        }
      }
      return result
    }
  }
}
</script>

<style scoped>
  /*布局样式*/
  .el-header, .el-footer {
    height: 120px!important;
    color:#fff;
    background:url(/static/assets/img/titlebg.png) no-repeat center center;
  }
  .el-aside {
    background-color: #f9f9f9;
    color: #fff;
    text-align: center;
    line-height: 200px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    -moz-box-shadow: rgb(167, 168, 169) 2px 0px 12px;/* 老的 Firefox */
    box-shadow: rgb(167, 168, 169) 2px 0px 12px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /*左侧导航的高度*/
  .el-menu-item, .el-submenu__title{
    height:100px;
    line-height: 30px;
    padding-top: 20px;
  }
  /*导航选中状态*/
  li.el-menu-item.is-active {
    color:#0F86FC!important;
    background-color:#F1EBE1!important;
  }
  .el-menu-item[data-v-a6d97536], .el-submenu__title[data-v-a6d97536]{
    background-color:#F1EBE1!important;
    color:#808080!important;
  }
  .top_qi{
    line-height: 37px;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  /*版本 时间点击弹出事件*/
  .version{
    display: inline-flex;
    float: right
  }
  hr{color:#f2f2f2}
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .btn{
    border:1px solid #fff;
    color:#fff;
    background-color: #1086FD;
    width: 70px;
    height: 30px;
    border-radius: 25px;
  }
  .rotate{
    transition: transform .3s;
  }
  .none_black{
    border-bottom: 1px solid #ddd;
    margin-right: 5px;
  }
  .bgcolor{
    background-color: #fff;
  }
  .detail{
    background: #CCCCCC;
    width: 70px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
  }
  .bettew_top{
    line-height: 40px;
  }
  .el-main{
    margin-left: 9%;
    min-height: 1000px;
  }
 img:hover {
   box-shadow: 1px 1px 10px #888888;
  }
  .visible3{
    color: #fff;
    background-color:  #1186FC;
  }
</style>
